<template>
  <BasicModal destroyOnClose title="流程详情" v-bind="$attrs" @register="registerModal" @visible-change="handlerVisibleChange">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="流程实例">
        <InstanceDetailProperty :instanceId="instanceId" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="业务表单">业务表单</a-tab-pane>
      <a-tab-pane key="3" force-render tab="流程跟踪">流程跟踪</a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { BasicModal, useModalInner } from '@/components/Modal'
  import InstanceDetailProperty from './InstanceDetailProperty.vue'

  const activeKey = ref('1')
  const instanceId = ref()

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    console.log('useModalInner', data)
    instanceId.value = data.instanceId
    setModalProps({
      confirmLoading: false,
      showCancelBtn: true,
      showOkBtn: false,
      defaultFullscreen: true,
    })
  })

  const handlerVisibleChange = (visible: boolean) => {
    console.log('流程实例详情窗口visible', visible)
    if (visible) {
    } else {
      instanceId.value = ''
    }
  }
</script>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }

    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }

    .ant-modal-body {
      flex: 1;
    }
  }
</style>
